<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>详细内容</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <link href="layui-v2.6.4/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <link href="layui-v2.6.4/layui/css/modules/code.css" rel="stylesheet" type="text/css"/>
    <script charset="utf-8" src="layui-v2.6.4/layui/layui.js" type="text/javascript"></script>
    <script th:inline="javascript" type="text/javascript">
        var art_id =  /*[[${art_id}]]*/1;
        var loginUserPname =  /*[[${loginUserPname}]]*/"寥";
        var myId =  /*[[${myId}]]*/1;
        layui.use('element', function () {
            var element = layui.element;
        });

        function show(e) {
            if ($(e).text() == '点击展开') {
                $(e).next().addClass("layui-show")
                $(e).text("点击隐藏")
                $(e).css("border-radius", "0px")
            } else {
                $(e).next().removeClass("layui-show")
                $(e).text("点击展开")
                $(e).css("border-radius", "35px")
            }
        }

        function sendComment() {
            var nowDate = new Date();
            $.get("/addComment", {"dec": $("#dec").val(), "artId": art_id}, function (resStr) {
                var reslist = resStr.split(",");
                if (reslist[0] == "1" && reslist[1] != "-1") {
                    var thiscomIds = reslist[1];
                    layer.msg($("#dec").val() + "发送成功," + art_id);
                    // location.assign("/toArticleInfo?id=" + art_id)
                    $("#rongqi2").append('<div class="layui-row">\n' +
                        '\t\t\t\t\t<div class="layui-circle layui-col-md1" style="width: 50px;height: 50px;background-color: #00FF00;font-size: large;color: white;padding-top:10px;text-align: center; ">\n' +
                        '\t\t\t\t\t\t' + loginUserPname.substr(0, 1) + '</div>\n' +
                        '\t\t\t\t\t<div class="layui-col-md11" style="padding: 15px;">' + loginUserPname + ':' + nowDate.toLocaleString() + '</div>\n' +
                        '\t\t\t\t\t<div class="layui-col-md12" style="">\n' +
                        '\t\t\t\t\t\t<p  onclick="sendReply1(this,' + myId + ',' + thiscomIds + ')" class="" style="padding: 20px;margin-top:20px;background-color: #c8e1e7;border-radius: 35px 35px 0 0;">\n' +
                        '\t\t\t\t\t\t\t' + $("#dec").val() + '\n' +
                        '\t\t\t\t\t\t</p>\n' +
                        '\t\t\t\t\t\t<div class="layui-collapse">\n' +
                        '\t\t\t\t\t\t\t<div class="layui-colla-item" style="background-color: #c8e1e7;border-radius:35px 35px 35px 35px">\n' +
                        '\t\t\t\t\t\t\t\t<h2  onclick="show(this)"  class="layui-colla-title" style="background-color: #c8e1e7;color: #929394;">点击展开</h2>\n' +
                        '\t\t\t\t\t\t\t\t<div class="layui-colla-content layui-row">\n' +
                        '\t\t\t\t\t\t\t\t\t<div class="layui-col-md12">\n' +
                        '\t\t\t\t\t\t\t\t\t\t<div class="layui-col-md12 layui-elip layui-icon">\n' +
                        '\t\t\t\t\t\t\t\t\t\t\t没有回复哦!\n' +
                        '\t\t\t\t\t\t\t\t\t\t</div>\n' +
                        '\t\t\t\t\t\t\t\t\t</div>\n' +
                        '\t\t\t\t\t\t\t\t</div>\n' +
                        '\t\t\t\t\t\t\t</div>\n' +
                        '\t\t\t\t\t\t</div>\n' +
                        '\t\t\t\t\t</div>\n' +
                        '\t\t\t\t</div>')
                    if (userlist.length % 3 == 0) {
                        pages += 1;
                    }
                } else if (reslist[0] == "3") {
                    location.assign("/toUserLogin");
                } else {
                    layer.msg(reslist[0]);
                    layer.msg("系统故障了!请稍后重试!");
                }
            })

        }

        function sendReply1(e, v1, v2) {
            var nowDate = new Date();
            layer.prompt("输入您的评论", function (data) {
                $.get("/addReply", {"toUser": v1, "commId": v2, "data": data, "artId": art_id}, function (res) {
                    if (res == 1) {
                        layer.msg("评论成功!发送给" + v1 + ",评论号" + v2 + "," + res)
                        // location.assign("/toArticleInfo?id=" + art_id)
                        $(e).next().children("div").children("div").append('<div class="layui-col-md12 layui-elip layui-icon" onclick="sendReply(this,' + userId + ',' + v2 + ')">\n' +
                            nowDate.toLocaleDateString() + '&nbsp;&nbsp;&nbsp;&#xe612;' + loginUserPname + ':回复&#xe609;用户' + v1 + ':\n' +
                            '</div>\n' +
                            '<div class="layui-col-md12" style="padding: 10px;">\n' +
                            data + '\n' +
                            '</div>\n')
                    } else if (res == 3) {
                        location.assign("/toUserLogin");
                    } else {
                        layer.msg(res)
                        layer.msg("系统故障!请稍后重试!")
                    }
                });
            })
        }

        function sendReply(e, v1, v2) {
            var nowDate = new Date();
            layer.prompt("输入您的评论", function (data) {
                $.get("/addReply", {"toUser": v1, "commId": v2, "data": data, "artId": art_id}, function (res) {
                    if (res == 1) {
                        layer.msg("评论成功!发送给" + v1 + ",评论号" + v2 + "," + res)
                        // location.assign("/toArticleInfo?id=" + art_id)
                        $('<div class="layui-col-md12 layui-elip layui-icon" onclick="sendReply(this,' + userId + ',' + v2 + ')">\n' +
                            nowDate.toLocaleDateString() + '&nbsp;&nbsp;&nbsp;&#xe612;' + loginUserPname + ':回复&#xe609;' + loginUserPname + ':\n' +
                            '</div>\n' +
                            '<div class="layui-col-md12" style="padding: 10px;">\n' +
                            data + '\n' +
                            '</div>\n').insertAfter($(e).next());
                    } else if (res == 3) {
                        location.assign("/toUserLogin");
                    } else {
                        layer.msg(res)
                        layer.msg("系统故障!请稍后重试!")
                    }
                });
            })
        }
    </script>
</head>
<body>
<div class="div_top" th:replace="include/top"></div>
<div class="layui-container">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;border-color: #3e0656;">
        <legend>详细内容</legend>
    </fieldset>
    <h1 align="center" th:text="${art_title}">某xx真的有妈妈么?</h1>
    <div class="layui-row" style="text-align: center;margin-top: 10px;color: #737076;">
        <div class="layui-col-md2 layui-col-md-offset4 layui-elip" th:text="'发布时间'+${art_time}">
            发布时间:2020-10-11 21:22:33
        </div>
        <div class="layui-col-md2 layui-elip" th:text="'发帖人:'+${userPname}">
            发帖人:寥寥清梦
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;border-color: #bfaab9;">
        <legend align="center">正文</legend>
    </fieldset>
    <div class="layui-row">
        <div class="layui-circle layui-col-md1"
             style="width: 50px;height: 50px;background-color: #00FF00;font-size: large;color: white;padding-top:10px;text-align: center; "
             th:text="${userPnameOne}">
            寥
        </div>
        <div class="layui-col-md11" style="padding: 15px;" th:text="${userPname}+':'+${art_time}">寥寥清梦:2020-11-11
            21:11:11
        </div>
        <div class="layui-col-md12">
            <p class="" style="padding: 20px;margin:20px 0;background-color: #ebd7e0;border-radius: 35px;"
               th:text="${art_Data}">
            </p>
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;border-color: #bfaab9;">
        <legend>评论区</legend>
    </fieldset>
    <div class="layui-row" id="rongqi">
    </div>
    <div class="layui-row" id="rongqi2">

    </div>
    <div class="layui-row" style="margin-top:20px ;border: 1px solid #dddaaa;border-radius: 35px">
        <div class="layui-col-md1 layui-elip" style="text-align: right;font-size: large;padding-top: 5px;"
             th:text="${loginUserPname}">
            寥寥清梦
        </div>
        <div class="layui-col-md10">
            <input class="layui-input" id="dec" name="" placeholder="输入您的评论内容" type="" value=""/>
        </div>
        <div class="layui-col-md1">
            <a class="layui-btn layui-btn-normal layui-btn-md" onclick="sendComment()">发送评论</a>
        </div>
    </div>
</div>
<script th:inline="javascript" type="text/javascript">
    var userlist = /*[[${userlist}]]*/ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var userlistId = /*[[${userlistId}]]*/ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var timeList = /*[[${timeList}]]*/ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var comData = /*[[${comData}]]*/ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var replies = /*[[${replies}]]*/ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var pages = /*[[${pages}]]*/0;
    var userId = /*[[${userId}]]*/0;
    var comIds = /*[[${comIds}]]*/[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var cpage = 0;
    layui.use('flow', function () {
        var flow = layui.flow;
        flow.load({
            elem: '#rongqi', //流加载容器
            scrollElem: '#rongqi',
            isAuto: true,
            end: '到底了哦',
            done: function (page, next) {
                setTimeout(function () {
                    var lis = [];
                    var limit = 3;
                    if (page == pages) {
                        limit = userlist.length - 3 * (page - 1);
                    }
                    for (var i = 0; i < limit; i++) {
                        var res = '';
                        var replist = replies[eval((page - 1) * 3 + i)];
                        if (replist.length != 0) {
                            for (var j = 0; j < replist.length; j++) {
                                res += '<div class="layui-col-md12 layui-elip layui-icon" onclick="sendReply(this,' + replist[j][5] + ',' + comIds[eval((page - 1) * limit + i)] + ')">\n' +
                                    replist[j][4] + '&nbsp;&nbsp;&nbsp;&#xe612;' + replist[j][3] + ':回复&#xe609;' + replist[j][2] + ':\n' +
                                    '</div>\n' +
                                    '<div class="layui-col-md12" style="padding: 10px;">\n' +
                                    replist[j][1] + '\n' +
                                    '</div>\n'
                            }
                        } else {
                            res += '<div class="layui-col-md12 layui-elip layui-icon">\n' +
                                '还没有回复!\n' +
                                '</div>\n'
                        }

                        lis.push(
                            '        <div class="layui-row">\n' +
                            '            <div class="layui-circle layui-col-md1" style="width: 50px;height: 50px;background-color: #00FF00;font-size: large;color: white;padding-top:10px;text-align: center; ">' + userlist[eval((page - 1) * 3 + i)].substr(0, 1) + '</div>\n' +
                            '            <div class="layui-col-md11" style="padding: 15px;">' + userlist[eval((page - 1) * 3 + i)] + ':' + timeList[eval((page - 1) * 3 + i)] + '</div>\n' +
                            '            <div class="layui-col-md12" style="">\n' +
                            '                <p onclick="sendReply1(this,' + userlistId[eval((page - 1) * 3 + i)] + ',' + comIds[eval((page - 1) * 3 + i)] + ')" class="" style="padding: 20px;margin-top:20px;background-color: #c8e1e7;border-radius: 35px 35px 0 0;">\n' + comData[eval((page - 1) * 3 + i)] + '\n' +
                            '                </p>\n' +
                            '                <div class="layui-collapse">\n' +
                            '                    <div class="layui-colla-item" style="background-color: #c8e1e7;border-radius: 0 0 35px 35px;">\n' +
                            '                        <h2 onclick="show(this)" class="layui-colla-title" style="background-color: #c8e1e7;color: #929394;">点击展开</h2>\n' +
                            '                        <div class="layui-colla-content layui-row">\n' +
                            res +
                            '                        </div>\n' +
                            '                    </div>\n' +
                            '                </div>\n' +
                            '            </div>\n' +
                            '        </div>'
                        )
                        cpage = page;
                    }
                    next(lis.join(''), page < pages);
                }, 500);
            }
        });
    });
</script>
</body>
</html>
